import classNames from "classnames";
import "./index.scss";
import { useMemo, useState } from "react";
import { billTypeToName } from "@/constants";
import BillIcon from "@/components/Icon";

const DayBill = ({ date, billList }) => {
  const dayResult = useMemo(() => {
    const pay = billList
      .filter((item) => item.type === "pay")
      .reduce((a, c) => a + c.money, 0);
    const income = billList
      .filter((item) => item.type === "income")
      .reduce((a, c) => a + c.money, 0);
    return {
      pay,
      income,
      total: pay + income,
    };
  }, [billList]);
  //控制明细列表是否显示
  const [visible, setVisible] = useState(true);

  return (
    <div className="dailyBill">
      <div className="header">
        <div className="dateIcon">
          <span className="date">{date}</span>
          <span
            className={classNames("arrow", visible && "expand")}
            onClick={() => setVisible(!visible)}
          ></span>
        </div>
        <div className="oneLineOverview">
          <div className="pay">
            <span className="type">支出</span>
            <span className="money">{dayResult.pay.toFixed(2)}</span>
          </div>
          <div className="income">
            <span className="type">收入</span>
            <span className="money">{dayResult.income.toFixed(2)}</span>
          </div>
          <div className="balance">
            <span className="money">{dayResult.total.toFixed(2)}</span>
            <span className="type">结余</span>
          </div>
        </div>
      </div>
      <div className="billList" style={{ display: visible ? "block" : "none" }}>
        {billList.map((item) => (
          <div key={item.id} className="bill">
            <div className="detail">
              <BillIcon type={item.useFor}></BillIcon>
              <div className="billType">{billTypeToName[item.useFor]}</div>
            </div>
            <div className={classNames("money", item.type)}>
              {item.money.toFixed(2)}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};
export default DayBill;
